<template>
    <div class="CommentEdit">
        <!-- 评论编辑弹出页 -->
        <van-popup v-model="showEdit"
                   position="bottom"
                   duration="0.2"
                   close-icon-position="top-left"
                   :style="{ width: '100%' , height: '100%'}">
            <div class="edit">
                <!-- 顶部导航栏 -->
                <div class="header">
                    <img src="@/assets/img/arrow-left.svg" alt="" @click="$emit('closeShowEdit')">
                    <span class="title">评论文章</span>
                    <span class="publish" @click="pushComment">发表</span>
                </div>
                <!-- 文本域 -->
                <van-field
                    v-model="commentText"
                    rows="10"
                    autosize
                    type="textarea"
                    placeholder="请输入"
                />
                <div class="clear">
                    <span @click="clearText">清空</span>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { setComment } from '@/api/comment'
import { Dialog } from 'vant'

export default {
    name: 'CommentEdit',
    props: {
        showEdit: Boolean,
        commentId: true,
        artId: true,
        target: String
    },
    data () {
        return {
            commentText: ''
        }
    },
    methods: {
        // 发表评论
        async pushComment () {
            await setComment({
                target: this.commentId,
                content: this.commentText,
                art_id: this.target === 'article' ? '' : this.artId
            })
            // 给文章页发通知，重新获取评论区
            this.$emit('reload')
            // 给文章页发通知，重新渲染文章，用于更新评论数
            this.$emit('initDetail')
            // 给文章页发通知，让其关闭编辑弹出页
            this.$emit('closeShowEdit')
            this.commentText = ''
        },
        // 清空评论编辑表单
        clearText () {
            Dialog.confirm({
                title: '警告',
                message: '您确定清空内容吗？清除后将无法恢复！'
            }).then(() => {
                this.commentText = ''
            }).catch(() => {
            })
        }
    }
}
</script>

<style scoped lang="less">
.CommentEdit {
    .edit {
        padding: 0 12px;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 44px;

            > img {
                height: 15px;
                margin-right: 16px;
            }

            .title {
                font-weight: 600;
                font-size: 17px;
                color: #323233;
            }

            .publish {
                font-weight: 600;
                font-size: 14px;
                color: #FC6627;
            }
        }

        .clear {
            display: flex;
            justify-content: right;

            span {
                font-weight: 600;
                font-size: 14px;
                color: #969799;
            }
        }

        ::v-deep .van-field {
            background-color: #F7F8FA;
            border-radius: 12px;
            padding: 8px;
            margin: 20px 0 10px;
        }
    }

    ::v-deep .van-search {
        width: 170px;
    }

    ::v-deep .van-icon__image {
        margin: 3px 5px 0 10px;
    }
}
</style>
